<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const option = {
        title: [
          {
            text: '男女薪资分布',
          },
          {
            subtext: '男生',
            left: '50%',
            top: '37%',
            textAlign: 'center',
            subtextStyle: {
              color: '#fffff',
              fontWeight: 700,
            },
          },
          {
            subtext: '女生',
            left: '50%',
            top: '75%',
            textAlign: 'center',
            subtextStyle: {
              color: '#fffff',
              fontWeight: 700,
            },
          },
        ],
        series: [
          {
            type: 'pie',
            radius: ['20%', '15%'],
            center: ['50%', '25%'],
            data: data,
            label: {
              position: 'outer',
              alignTo: 'none',
              bleedMargin: 5,
            },
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
          },
          {
            type: 'pie',
            radius: ['20%', '15%'],
            center: ['50%', '60%'],
            data: data,
            label: {
              position: 'outer',
              alignTo: 'labelLine',
              bleedMargin: 5,
            },
            left: '0',
            right: '0',
            top: 0,
            bottom: 0,
          },
        ],
      };
    </script>
  </body>
</html>
